<template>
  <div>
    <el-card>
      <h3>最近要举办的大型考试:</h3>
      <div style="margin-top: 10px" class="btn">
      <div class="query">
        <el-input
          placeholder="请输入关键词搜索"
          class="searchName"
          v-model="searchName"
          id="query"
          icon="el-icon-search"
          @input="query(searchName)"
        ></el-input>
      </div>
    </div>
      <el-table :data="tableData" border stripe>
        <el-table-column prop="name" label="考试名称" width="300" sortable="true"></el-table-column>
        <el-table-column prop="id" label="教师代码" width="300" sortable></el-table-column>
        <el-table-column prop="time" label="考试时间" width="400" sortable></el-table-column>
        <el-table-column label="操作" width="200" style="padding:0">
          <template slot-scope="scope">
            <el-button  type="primary" style="height:25px" size="medium" @click>报名</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="报名状态" width="476" sortable></el-table-column>
      </el-table>
      <div class="block" id="pageselect">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
      <el-dialog title="教师信息" :visible.sync="dialogFormVisible" customClass="customWidth">

      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import http from "@/plugins/http";
import "@/mock/Article";
import Confirm from "@/plugins/confirm";

export default {
  name: "article-index",
  components: {},
  data() {
    return {
      // currentPage: 1, //初始页
      // pagesize: 10, //    每页的数据
      searchName:"",
      dialogFormVisible: false,
      dialogFormTitle: "",
      dialogId: 0,
      dialogEditTime: 0,
      inputKeyword: "",
      keyword: "",
      orderTip: "自 然 排 序",
      orderType: "pubdate",
      artsorts: [],
      initArtsorts: [],
      artsortId: 0,
      listData: null,
      total: 1,
      pageSize: 10,
      currentPage: 1,
      selections: [],
      secondData:[],
      tableData: [
        {
          name: "MHK",
          id: "156458",
          time: "2018-02-26 09:00:00",
          status: "教务办审核通过，教务处审核通过"
        },
        {
          name: "MHK",
          id: "156458",
          time: "2018-02-26 09:00:00",
          status: "教务办审核通过，教务处审核通过"
        },
        {
          name: "MHK",
          id: "156458",
          time: "2018-02-26 09:00:00",
          status: "教务办审核通过，教务处审核通过"
        },
        {
          name: "MHK",
          id: "156458",
          time: "2018-02-26 09:00:00",
          status: "教务办审核通过，教务处审核通过"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  methods: {
    query(searchName) {
      let search = this.searchName;
      this.tableData = this.secondData;
      this.tableData = this.tableData.filter(
        data =>
          data.name.toLowerCase().includes(search.toLowerCase()) ||
          data.id.toLowerCase().includes(search.toLowerCase()) ||
          data.time.toLowerCase().includes(search.toLowerCase())
      );
    },
    handleChange(value) {
      console.log(value);
    },
    handleSizeChange: function(size) {
      this.pageSize = size;
      console.log(this.pageSize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    add: function() {
      this.dialogFormTitle = "添加";
      this.dialogId = 0;
      this.dialogEditTime = new Date().getTime();
      this.toggleDialog(true);
    },
    edit: function(id) {
      this.dialogFormTitle = "编辑";
      this.dialogId = id;
      this.dialogEditTime = new Date().getTime();
      this.toggleDialog(true);
    },
    // delSelection: function() {
    //   let ids = [];
    //   this.selections.forEach(item => {
    //     ids.push(item.art_id);
    //   });
    //   Confirm.show("确定删除吗，不可恢复哦?").then(() => {
    //     http
    //       .send({
    //         url: "/Article/delSelection",
    //         sendType: "post",
    //         param: { ids: ids.join(",") },
    //         showSuccessTip: true
    //       })
    //       .then(data => {
    //         if (data.code === 0) {
    //           this.total = data.total;
    //           const computedCurrentPage = Math.ceil(this.total / this.pageSize);
    //           this.currentPage =
    //             this.currentPage > 1 && this.currentPage > computedCurrentPage
    //               ? computedCurrentPage
    //               : this.currentPage;
    //           this.getData(this.currentPage);
    //         }
    //       });
    //   });
    // },
    handleSelectionChange: function(data) {
      this.selections = data;
    },
    toggleDialog: function(flag) {
      this.$refs.edit.toggleDialog(flag);
    },
    pageClick: function(p) {
      this.getData(p);
    },
    changeOrder: function() {
      if (this.orderType === "pubdate") {
        this.orderTip = "设 置 排 序";
        this.orderType = "setorder";
      } else {
        this.orderTip = "自 然 排 序";
        this.orderType = "pubdate";
      }
      this.getData(this.currentPage);
    },
    // getData: function(p) {
    //   http
    //     .send({
    //       url: "/Article/listAll",
    //       param: {
    //         params: {
    //           p: p,
    //           keyword: escape(this.keyword),
    //           artsort_id: this.artsortId,
    //           orderType: this.orderType
    //         }
    //       }
    //     })
    //     .then(data => {
    //       this.listData = data.extra;
    //       this.listData = this.listData.map(art => {
    //         this.initArtsorts.every(item => {
    //           if (item.artsort_id === art.artsort_id) {
    //             art.artsort_name = item.artsort_name;
    //             return false;
    //           }
    //           return true;
    //         });
    //         return art;
    //       });
    //       this.total = data.total;
    //       this.pageSize = data.pageSize;
    //       this.currentPage = p;
    //     });
    // },
    search: function() {
      this.keyword = this.inputKeyword; // 不要直接修改keyword，防止输入但未搜索变更了关键词
      this.getData(1);
    },
    changeArtsort: function(val) {
      this.getData(1);
    },
    // recursiveArtsort: function(item, level) {
    //   const artsort = JSON.parse(
    //     `{ "artsort_id" : ${item.artsort_id} , "artsort_name" : "${"　".repeat(
    //       level
    //     )} |-- ${item.artsort_name}" }`
    //   );
    //   this.initArtsorts.push(item);
    //   this.artsorts.push(artsort);
    //   level++;
    //   if (item.children) {
    //     item.children.forEach(itemChildren => {
    //       this.recursiveArtsort(itemChildren, level);
    //     });
    //   }
    // },
  //   loadArtsort: function() {
  //     this.initArtsorts = [];
  //     this.artsorts = [];
  //     http.send({ url: "/Artsort/listAll" }).then(data => {
  //       data.extra.forEach(item => {
  //         this.recursiveArtsort(item, 0);
  //       });
  //       this.artsorts.some(item => item.artsort_id === this.artsortId) ||
  //         (this.artsortId = 0);
  //       this.getData(this.currentPage);
  //     });
  //   },
    // loadMine: function() {
    //   this.loadArtsort();
    // }
  },
  mounted: function() {
    // this.loadMine();
  },
  watch: {
    // "$store.state.reloadPageTime": function() {
    //   this.loadMine();
    // }
  }
};
</script>

<style>
#articleIndex .el-dialog {
  margin-top: 0 !important;
}
</style>

<style scoped>
#articleIndex {
  min-width: 960px;
}
.panel {
  width: 100%;
  min-height: 40px;
  padding-bottom: 15px;
}
.keyword {
  width: 160px;
  padding: 0 10px;
}
.artsort {
  padding-left: 10px;
}
.projectselect {
  width: 90%;
  margin-left: 20px;
}
.select {
  width: 200px;
}

.btn .searchName {
  width: 250px;
}
.btn {
  display: flex;
  justify-content: space-between;
}
</style>
